<script setup>
import {reactive} from "vue";
import LetCard from "../../../layout/components/LteCard.vue";
import useUserStore from "../../../stores/system/user";
import {ChangePassword} from "../../../apis/system/user";

const store = useUserStore();

const form = reactive({
    password_old: '',
    password_new: '',
    password_confirm: '',
});
const errors = reactive({
    password_old: '',
    password_new: '',
    password_confirm: '',
});
const alert = reactive({
    show: false,
    type: 'success',
    title: 'Tips',
    message: '',
})

const showAlert = (type, message) => {
    alert.show = true;
    alert.type = type;
    alert.title = "Tips";
    alert.message = message;
}
const hideAlert = () => {
    alert.show = false;
    alert.type = "";
    alert.title = "";
    alert.message = "";
}
const check = () => {
    //清空错误
    errors.password_old = "";
    errors.password_new = "";
    errors.password_confirm = "";
    //错误检测
    if(form.password_old.length < 6){
        errors.password_old = "Old passwords must be at least 6 characters in length.";
        return false;
    }
    if(form.password_new.length < 6){
        errors.password_new = "New passwords must be at least 6 characters in length.";
        return false;
    }
    if(form.password_confirm.length < 6){
        errors.password_confirm = "Confirm new passwords must be at least 6 characters in length.";
        return false;
    }
    if(form.password_new !== form.password_confirm){
        errors.password_new = "Inconsistent with the password twice.";
        return false;
    }
    //默认返回
    return true;
};
const submit = () => {
    //执行检查
    if(!check()){
        return;
    }
    //执行修改
    ChangePassword(store.id, form).then((res) => {
        showAlert("success", res?.data?.message || res?.data?.error);
    }).catch((res) => {
        showAlert("danger", res?.data?.message || res?.data?.error);
    })
};
</script>

<template>
    <div v-if="alert.show">
        <div class="alert alert-dismissible" :class="{'alert-danger': (alert.type==='danger'), 'alert-success': (alert.type==='success'), 'alert-warning': (alert.type==='warning')}">
            <button type="button" class="close" @click="hideAlert">×</button>
            <h5>{{alert.title}}</h5>
            <p>{{alert.message}}</p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">
            <let-card title="Options" outline collapse notpadding>
                <ul class="nav nav-pills flex-column">
                    <li class="nav-item">
                        <a href="#" class="nav-link">
                            <i class="fas fa-lock"></i> Change Password
                        </a>
                    </li>
                </ul>
            </let-card>
        </div>
        <div class="col-md-9">
            <let-card title="Change Password" collapse outline remove>
                <template #default>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Old Password</label>
                        <input type="password" class="form-control" placeholder="Enter old password" v-model="form.password_old" :class="{'is-invalid' : errors.password_old}" required>
                        <div class="invalid-feedback" v-if="errors.password_old">
                            {{ errors.password_old }}
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">New Password</label>
                        <input type="password" class="form-control" placeholder="Enter new password" v-model="form.password_new" :class="{'is-invalid' : errors.password_new}" required>
                        <div class="invalid-feedback" v-if="errors.password_new">
                            {{ errors.password_new }}
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="exampleInputEmail1">Confirm Password</label>
                        <input type="password" class="form-control" placeholder="Enter confirm password" v-model="form.password_confirm" :class="{'is-invalid' : errors.password_confirm}" required>
                        <div class="invalid-feedback" v-if="errors.password_confirm">
                            {{ errors.password_confirm }}
                        </div>
                    </div>
                </template>
                <template #footer>
                    <button type="submit" class="btn btn-primary" @click="submit">Submit</button>
                </template>
            </let-card>
        </div>
    </div>
</template>